<template>
  <div class="mainContent">
    <pathTracking :path="Model.path"/>
    <div class="container">
      <!-- {{this.$route.params.id}} -->
      <!-- 一级tabs -->
      <el-radio-group v-model="Model.activeTab" @change="onTabChange">
        <el-radio-button label="1">售中订单详情</el-radio-button>
        <el-radio-button label="2">赠品管理</el-radio-button>
        <el-radio-button label="3">支付记录</el-radio-button>
        <el-radio-button label="4">操作日志</el-radio-button>
      </el-radio-group>
      <div class="tabBox">
        <el-form :inline="true" :model="Model.tabFormInline" class="demo-form-inline">
          <el-form-item label="售后单号">:{{Model.tabFormInline.order}}</el-form-item>
          <el-form-item label="售后状态">:{{Model.tabFormInline.status}}</el-form-item>
          <el-form-item label="sap售中单号">:{{Model.tabFormInline.sapOrder}}</el-form-item>
          <el-form-item label="原销售定单号">:{{Model.tabFormInline.defaultOrder}}</el-form-item>
          <el-form-item label="原sap销售订单号">:{{Model.tabFormInline.defaultSapOrder}}</el-form-item>
        </el-form>
        <div class="tabBoxStep">
          <el-steps :active="Model.refundStep.activeStep">
            <el-step
              :title="item.title"
              :description="item.description"
              v-for="(item,index) in Model.refundStep.step"
              :key="index"
            ></el-step>
          </el-steps>
        </div>
      </div>
      <div v-show="Model.activeTab==1">
        <div class="table">
          <el-row>
            <div class="common-table-title">
              <div class="common-table-icon"></div>
              <div class="common-table-fl">订单变更单信息</div>
            </div>
          </el-row>
          <div class="formInline">
            <el-form :inline="true" :model="Model.tableFormInline" class="demo-form-inline">
              <el-form-item label="订单编号">:{{Model.tableFormInline.order}}</el-form-item>
              <el-form-item label="原sap销售订单号">:{{Model.tableFormInline.defaultSapOrder}}</el-form-item>
              <el-form-item label="下单人">:{{Model.tableFormInline.user}}</el-form-item>
              <el-form-item label="配送类型">:{{Model.tableFormInline.deliveryType}}</el-form-item>
              <el-form-item label="发货门店">:{{Model.tableFormInline.deliveryAddress}}</el-form-item>
              <el-form-item label="销售来源">:{{Model.tableFormInline.soleAddress}}</el-form-item>
              <el-form-item label="销售员">:{{Model.tableFormInline.soler}}</el-form-item>
            </el-form>
          </div>
          <div style="padding:0px 15px 15px 15px;background:#fff;">
            <el-table
              :data="Model.tableData"
              border
              style="width: 100%;max-height:550px"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="index" width="50" label="序号" fixed></el-table-column>
              <el-table-column prop="origin" label="定制编号" width="100"></el-table-column>
              <el-table-column prop="deliveryTime" label="产品类型" width="120"></el-table-column>
              <el-table-column prop="deliveryTime2" label="品类" width="120"></el-table-column>
              <el-table-column prop="orderId7">
                <template slot="header" slot-scope="scope">
                  <el-tooltip content="钻石信息顺序:颜色-净度-切工-抛光-对称-荧光" placement="top">
                    <span>描述 ？</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="qcFinishTime" label="刻字" width="120"></el-table-column>
              <el-table-column prop="status" label="客户收货日期" width="200"></el-table-column>
              <el-table-column prop="status" label="价格" width="120"></el-table-column>
              <el-table-column prop="status" label="特殊定制要求" width="120"></el-table-column>
              <el-table-column prop="status" label="备注" width="120"></el-table-column>
              <el-table-column prop="status" label="主数量" width="120"></el-table-column>
              <el-table-column fixed="right" :label="$t('common.handleOption')" width="150">
                <template slot-scope="scope">
                  <div class="btnGroup">
                    <div class="operate-btn" @click="onOrderChange(scope.row)">发起变更</div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="formInline">
            <div>其他信息修改:{{'暂无'}}</div>
            <div>收货日期修改:{{'2019年1月26'}}</div>
          </div>
        </div>
        <!--  -->
        <div class="tableBox">
          <el-row>
            <div class="common-table-title">
              <div class="common-table-icon"></div>
              <div class="common-table-fl">应退商品</div>
            </div>
          </el-row>
          <div class="table">
            <el-table
              :data="Model.tableData"
              show-summary
              border
              style="width: 100%;max-height:550px"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="index" width="50" label="序号" fixed></el-table-column>
              <el-table-column prop="origin" label="商品图片" width="100"></el-table-column>
              <el-table-column prop="deliveryTime" label="定制编码" width="120"></el-table-column>
              <el-table-column prop="deliveryTime2" label="条码" width="120"></el-table-column>
              <el-table-column prop="qcFinishTime" label="销售分类" width="120"></el-table-column>
              <el-table-column prop="orderId7" width="120">
                <template slot="header" slot-scope="scope">
                  <el-tooltip content="钻石信息顺序:颜色-净度-切工-抛光-对称-荧光" placement="top">
                    <span>描述 ？</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="刻字" width="200"></el-table-column>
              <el-table-column prop="status" label="主数量" width="120"></el-table-column>
              <el-table-column prop="status" label="价格" width="120"></el-table-column>
              <el-table-column prop="status" label="备注" width="120"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="tableBox">
          <el-row>
            <div class="common-table-title">
              <div class="common-table-icon"></div>
              <div class="common-table-fl">退款商品信息</div>
            </div>
          </el-row>
          <div class="table">
            <el-table
              :data="Model.tableData"
              show-summary
              border
              style="width: 100%;max-height:550px"
              @selection-change="handleSelectionChange"
            >
              <el-table-column prop="origin" label="销售订单号" width="100"></el-table-column>
              <el-table-column prop="deliveryTime" label="订单金额" width="120"></el-table-column>
              <el-table-column prop="deliveryTime2" label="商品实付金额" width="120"></el-table-column>
              <el-table-column prop="qcFinishTime" label="定制费用" width="120"></el-table-column>
              <el-table-column prop="status" label="证书遗失费用" width="200"></el-table-column>
              <el-table-column prop="status" label="发票遗失费用" width="120"></el-table-column>
              <el-table-column prop="status" label="其他费用" width="120"></el-table-column>
              <el-table-column prop="status" label="合计退款金额" width="120"></el-table-column>
              <el-table-column prop="status" label="备注" width="120"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="tableBox">
          <el-row>
            <div class="common-table-title">
              <div class="common-table-icon"></div>
              <div class="common-table-fl">退款用户账户</div>
            </div>
          </el-row>
          <div class="table">
            <el-table
              :data="Model.tableData"
              border
              style="width: 100%;max-height:550px"
              @selection-change="handleSelectionChange"
            >
              <el-table-column prop="origin" label="退款账号" width="100"></el-table-column>
              <el-table-column prop="deliveryTime" label="开户行" width="120"></el-table-column>
              <el-table-column prop="deliveryTime2" label="开户人姓名" width="120"></el-table-column>
              <el-table-column prop="qcFinishTime" label="退款金额" width="120"></el-table-column>
              <el-table-column prop="status" label="退款申请时间"></el-table-column>
            </el-table>
          </div>
        </div>
        <!--  -->
      </div>
      <div v-show="Model.activeTab==2">
        <div class="table">
          <el-row>
            <div class="common-table-title">
              <div class="common-table-icon"></div>
              <div class="common-table-fl">订单基础信息</div>
            </div>
          </el-row>
          <div class="formInline">
            <el-form :inline="true" :model="Model.tableFormInline" class="demo-form-inline">
              <el-form-item label="订单编号">:{{Model.tableFormInline.order}}</el-form-item>
              <el-form-item label="原sap销售订单号">:{{Model.tableFormInline.defaultSapOrder}}</el-form-item>
              <el-form-item label="下单人">:{{Model.tableFormInline.user}}</el-form-item>
              <el-form-item label="配送类型">:{{Model.tableFormInline.deliveryType}}</el-form-item>
              <el-form-item label="发货门店">:{{Model.tableFormInline.deliveryAddress}}</el-form-item>
              <el-form-item label="销售来源">:{{Model.tableFormInline.soleAddress}}</el-form-item>
              <el-form-item label="销售员">:{{Model.tableFormInline.soler}}</el-form-item>
            </el-form>
          </div>
        </div>
        <div class="table">
          <el-row>
            <div class="common-table-title">
              <div class="common-table-icon"></div>
              <div class="common-table-fl">附赠品列表</div>
            </div>
          </el-row>
          <div class="formInline">
            <el-form :inline="true" class="demo-form-inline">
              <el-form-item label="特殊申请赠品原因">:{{'活动需要'}}</el-form-item>
            </el-form>
          </div>
          <div style="padding:0px 15px 15px 15px;background:#fff;">
            <el-table
              :data="Model.tableData"
              border
              show-summary
              style="width: 100%;max-height:550px"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="index" width="50" label="序号" fixed></el-table-column>
              <el-table-column prop="origin" label="附赠品编号" width="100"></el-table-column>
              <el-table-column prop="deliveryTime" label="附赠品名称" width="120"></el-table-column>
              <el-table-column prop="deliveryTime2" label="添加赠品时间" width="120"></el-table-column>
              <el-table-column prop="qcFinishTime" label="数量" width="120"></el-table-column>
              <el-table-column fixed="right" :label="$t('common.handleOption')">
                <template slot-scope="scope">
                  <div class="btnGroup">
                    <div class="operate-btn">删除</div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="table">
          <el-row>
            <div class="common-table-title">
              <div class="common-table-icon"></div>
              <div class="common-table-fl">附赠品收货地址</div>
            </div>
          </el-row>
          <div style="padding:0px 15px 15px 15px;background:#fff;" class="tableBox">
            <el-table
              :data="Model.tableData"
              border
              show-summary
              style="width: 100%;max-height:550px"
              @selection-change="handleSelectionChange"
            >
              <el-table-column prop="origin" label="收件人姓名" width="100"></el-table-column>
              <el-table-column prop="deliveryTime" label="联系电话" width="120"></el-table-column>
              <el-table-column prop="deliveryTime2" label="收件人地址" width="120"></el-table-column>
              <el-table-column fixed="right" :label="$t('common.handleOption')">
                <template slot-scope="scope">
                  <div class="btnGroup">
                    <div class="operate-btn">删除</div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div v-show="Model.activeTab==3">
        <div class="table">
          <el-row>
            <div class="common-table-title">
              <div class="common-table-icon"></div>
              <div class="common-table-fl">订单基础信息</div>
            </div>
          </el-row>
          <div class="formInline">
            <el-form :inline="true" :model="Model.tableFormInline" class="demo-form-inline">
              <el-form-item label="订单编号">:{{Model.tableFormInline.order}}</el-form-item>
              <el-form-item label="原sap销售订单号">:{{Model.tableFormInline.defaultSapOrder}}</el-form-item>
              <el-form-item label="下单人">:{{Model.tableFormInline.user}}</el-form-item>
              <el-form-item label="配送类型">:{{Model.tableFormInline.deliveryType}}</el-form-item>
              <el-form-item label="发货门店">:{{Model.tableFormInline.deliveryAddress}}</el-form-item>
              <el-form-item label="销售来源">:{{Model.tableFormInline.soleAddress}}</el-form-item>
              <el-form-item label="销售员">:{{Model.tableFormInline.soler}}</el-form-item>
            </el-form>
          </div>
        </div>
        <div class="table">
          <el-row>
            <div class="common-table-title">
              <div class="common-table-icon"></div>
              <div class="common-table-fl">收款记录</div>
            </div>
          </el-row>
          <div style="padding:0px 15px 15px 15px;background:#fff;">
            <el-table
              :data="Model.tableData"
              border
              show-summary
              style="width: 100%;max-height:550px"
              @selection-change="handleSelectionChange"
            >
              <el-table-column prop="origin" label="支付流水号" width="100"></el-table-column>
              <el-table-column prop="deliveryTime" label="支付方式" width="120"></el-table-column>
              <el-table-column prop="deliveryTime2" label="支付金额" width="120"></el-table-column>
              <el-table-column prop="qcFinishTime" label="支付时间" width="120"></el-table-column>
              <el-table-column prop="qcFinishTime" label="操作人" width="120"></el-table-column>
              <el-table-column prop="qcFinishTime" label="财务确认" width="120"></el-table-column>
              <el-table-column prop="qcFinishTime" label="收款账户" width="120"></el-table-column>
              <el-table-column fixed="right" :label="$t('common.handleOption')">
                <template slot-scope="scope">
                  <div class="btnGroup">
                    <div class="operate-btn">编辑</div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="table">
          <el-row>
            <div class="common-table-title">
              <div class="common-table-icon"></div>
              <div class="common-table-fl">退款记录</div>
            </div>
          </el-row>
          <div style="padding:0px 15px 15px 15px;background:#fff;">
            <el-table
              :data="Model.tableData"
              border
              show-summary
              style="width: 100%;max-height:550px"
              @selection-change="handleSelectionChange"
            >
              <el-table-column prop="origin" label="退款流水号" width="100"></el-table-column>
              <el-table-column prop="deliveryTime" label="退款账号" width="120"></el-table-column>
              <el-table-column prop="deliveryTime2" label="开户行" width="120"></el-table-column>
              <el-table-column prop="qcFinishTime" label="开户人姓名" width="120"></el-table-column>
              <el-table-column prop="qcFinishTime" label="退款金额" width="120"></el-table-column>
              <el-table-column prop="qcFinishTime" label="退款操作时间" width="200"></el-table-column>
              <el-table-column prop="qcFinishTime" label="操作人" width="120"></el-table-column>
              <el-table-column prop="qcFinishTime" label="财务确认" width="120"></el-table-column>
              <el-table-column fixed="right" :label="$t('common.handleOption')">
                <template slot-scope="scope">
                  <div class="btnGroup">
                    <div class="operate-btn">编辑</div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div v-show="Model.activeTab==4">
        <div class="table">
          <el-row>
            <div class="common-table-title">
              <div class="common-table-icon"></div>
              <div class="common-table-fl">订单基础信息</div>
            </div>
          </el-row>
          <div class="formInline">
            <el-form :inline="true" :model="Model.tableFormInline" class="demo-form-inline">
              <el-form-item label="订单编号">:{{Model.tableFormInline.order}}</el-form-item>
              <el-form-item label="原sap销售订单号">:{{Model.tableFormInline.defaultSapOrder}}</el-form-item>
              <el-form-item label="下单人">:{{Model.tableFormInline.user}}</el-form-item>
              <el-form-item label="配送类型">:{{Model.tableFormInline.deliveryType}}</el-form-item>
              <el-form-item label="发货门店">:{{Model.tableFormInline.deliveryAddress}}</el-form-item>
              <el-form-item label="销售来源">:{{Model.tableFormInline.soleAddress}}</el-form-item>
              <el-form-item label="销售员">:{{Model.tableFormInline.soler}}</el-form-item>
            </el-form>
          </div>
        </div>
        <div class="table">
          <el-row>
            <div class="common-table-title">
              <div class="common-table-icon"></div>
              <div class="common-table-fl">订单操作日志</div>
            </div>
          </el-row>
          <div style="padding:0px 15px 15px 15px;background:#fff;">
            <el-table
              :data="Model.tableData"
              border
              show-summary
              style="width: 100%;max-height:550px"
              @selection-change="handleSelectionChange"
            >
              <el-table-column prop="origin" label="时间" width="100"></el-table-column>
              <el-table-column prop="deliveryTime" label="操作类型" width="120"></el-table-column>
              <el-table-column prop="deliveryTime2" label="操作人" width="120"></el-table-column>
              <el-table-column prop="qcFinishTime" label="操作记录"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pathTracking from "@/components/common/pathTracking";
import pagination from "@/components/common/pagination.vue";
import advancedSearch from "@/components/common/filter/advancedSearch";
import { getDateString } from "@/assets/js/common.js";
import Model from "./model.js";
import Controller from "./controller.js";
export default {
  name: "purchase",
  mixins: [Model, Controller],
  components: {
    advancedSearch,
    pagination,
    pathTracking
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "./index.less";
</style>